<%@page import="com.zretc.emptraining.entity.CoursePlan"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.zretc.emptraining.dbtools.PageData"%>
<%@page import="com.zretc.emptraining.serviceimpl.ManagerAppServiceImp"%>
<%@page import="com.zretc.emptraining.service.ManagerAppService"%>
<%@page import="com.zretc.emptraining.serviceimpl.PerCourseServiceImp"%>
<%@page import="com.zretc.emptraining.service.PerCourseServic"%>
<%@page import="com.zretc.emptraining.serviceimpl.CoursePlanServiceImpl"%>
<%@page import="com.zretc.emptraining.service.CoursePlanService"%>
<%@page import="com.zretc.emptraining.serviceimpl.DeptServiceImpl"%>
<%@page import="com.zretc.emptraining.service.DeptService"%>
<%@page import="com.zretc.emptraining.serviceimpl.TeachServiceImpl"%>
<%@page import="com.zretc.emptraining.service.TeachService"%>
<%@page import="com.zretc.emptraining.serviceimpl.EmpServiceImpl"%>
<%@page import="com.zretc.emptraining.service.EmpService"%>
<%@page import="com.zretc.emptraining.serviceimpl.UsersServiceImp"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>
       	 后台管理系统
    </title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="./css/x-admin.css" media="all" />
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" media="all" />
</head>
<body>
<style type="text/css">
    legend { display: block; width:100px; border-bottom:0px; font-family: "Microsoft YaHei","Helvetica Neue";}
    legend a{ color:#666;} legend a:hover{ text-decoration:none;}
    .layui-table{ font-family: "Microsoft YaHei","Helvetica Neue";}
</style>
<div class="x-body">
    <blockquote class="layui-elem-quote">
	    <%
	    	// 获取当前时间
			Date d = new Date();
			SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			String now = df.format(d);
			// 获取员工人数
			EmpService es = new EmpServiceImpl();
			int empCount = es.getEmpByPage(1, 10, "").getTotalCount();
			// 获取教员人数
			TeachService ts = new TeachServiceImpl();
			int teacherCount = ts.getPageByTeachName(1, 10, "").getTotalCount();
			// 获取部门人数
			DeptService ds = new DeptServiceImpl();
			int deptCount = ds.getPageByDeptName(1, 10, "").getTotalCount();
			// 获取课程计划数
 			CoursePlanService cps = new CoursePlanServiceImpl();
			int planCount = cps.getAllCoursePlansByPage(1, 10).getTotalCount();
			// 获取员工申请人数
			PerCourseServic pcs = new PerCourseServiceImp();
			int perCount = pcs.getPerCourse(1, 10).getTotalCount();
			// 获取部门申请人数
			ManagerAppService mas = new ManagerAppServiceImp();
			int mCount = mas.getManagerAppsByLike(1, 10, "").getTotalCount();
		%>
                           欢迎使用后台管理系统！
         &nbsp;&nbsp; 登陆时间：
         <span style="color: #FF5722; font-family: 'yjsz';font-size: 2rem"><%=now %></span>
         &nbsp;&nbsp; 在线人数：
         <span style="color: #FF5722; font-family: 'yjsz';font-size: 2rem"><%=application.getAttribute("count")%></span>
        
    </blockquote>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-2">
            <section class="panel bgys">
                <div class="symbol bgcolor-blue">
                    <i class="fa iconfont"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" ><i class="iconfont " data-icon=""></i> <h1><%=empCount%></h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i><span>员工总数</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2 ">
            <section class="panel bgys">
                <div class="symbol bgcolor-commred">
                    <i class="fa fa-handshake-o"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i> <h1><%=teacherCount%></h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i><span>教员总数</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2 ">
            <section class="panel bgys">
                <div class="symbol bgcolor-dark-green">
                   	<img src="./images/部门.png" width="40px" height="40px">
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i> <h1><%=deptCount%></h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i><span>部门数</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2 ">
            <section class="panel bgys">
                <div class="symbol bgcolor-blue">
                    <i class="fa  iconfont"></i>
                </div>

                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i> <h1><%=planCount%></h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i><span>课程计划数</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2 ">
            <section class="panel bgys">
                <div class="symbol bgcolor-commred">
                    <img src="./images/个人申请.png" width="40px" height="40px">
                </div>

                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i> <h1><%=perCount%></h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i><span>个人申请数</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2 ">
            <section class="panel bgys">
                <div class="symbol bgcolor-dark-green">
                    <img src="./images/部门申请.png" width="40px" height="40px">
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i> <h1><%=mCount %></h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" > <i class="iconfont " data-icon=""></i><span>部门申请数</span></a>
                </div>
            </section>
        </div>

    </div>
	<fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="default">今日课程</a></legend>
    </fieldset>
    <div class="row">
    	<table class="layui-table">
			<thead >
				<tr>
					<th>课程计划编号</th>
					<th>课程名</th>
					<th>教师名</th>
					<th>上课人数</th>
					<th>上课地点</th>
					<th>上课时间</th>
				</tr>
			</thead>
			<tbody>
			<c:if test="${pd == null}">
				<c:redirect url="CoursePlanServlet?op=totdayplan"></c:redirect>
			</c:if>
			<c:forEach items="${pd.data}" var="cp">
				<tr>
					<td>${cp.cpNo}</td>
					<td>${cp.courseName}</td>
					<td>${cp.teacherName}</td>
					<td>${cp.courseNum}</td>
					<td>${cp.coursePlace}</td>
					<td>${cp.courseTime}</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
    </div>
    <div class="layui-footer footer footer-demo">
        <div class="layui-main">
            <p> Copyright &copy;2020  EmpTraining.</p>
        </div>
    </div>

</div>
<script src="js/jquery-2.0.3.js" charset="utf-8"></script>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script src="./js/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['资讯','图片','说说','管理员登陆记录']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'],
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            //boundaryGap: false,
            data:["2018-02-26","2018-02-27","2018-02-28","2018-03-01","2018-03-02","2018-03-03","2018-03-04"]
        },
        yAxis: {
            type: 'value',
            //boundaryGap: false,
            //data:['1','2','3','4','5','6','7']
        },

        series: [
            {
                name:'资讯',
                type:'line',
                stack: '总量',

                data:[5,3,6,8,3,2,4]                },
            {
                name:'图片',
                type:'line',
                stack: '总量',
                data:[2,4,6,5,6,7,8]                },
            {
                name:'说说',
                type:'line',
                stack: '总量',
                data:[3,5,8,2,4,9,10]                },
            {
                name:'管理员登陆记录',
                type:'line',
                stack: '总量',
                data:[5,6,8,7,9,10,1]                }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 指定图表的配置项和数据
    var myChart = echarts.init(document.getElementById('area'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '分类文章数据统计',
            subtext: '文章总数',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        itemStyle: {

            normal: {

                //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                color: function(params) {

                    // build a color map as your need.

                    var colorList = [

                        '#f36f8a','#B5C334','#FCCE10','#E87C25','#27727B',

                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                    ];

                    return colorList[params.dataIndex]

                },

                //以下为是否显示，显示位置和显示格式的设置了

                label: {

                    show: true,

                    position: 'top',

//                             formatter: '{c}'

                    formatter: '{b}\n{c}'

                }

            }

        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['PHP', 'JavaScript', 'MySQL', 'jQuery', 'CSS', 'MUI', ]
        },
        series: [{

            name: '文章总数',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [

                {value: 19, name: 'PHP'} ,
                {value: 5, name: 'JavaScript'} ,
                {value: 6, name: 'MySQL'} ,
                {value: 10, name: 'jQuery'} ,
                {value: 8, name: 'CSS'} ,
                {value: 2, name: 'MUI'} ,

            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('years'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '文章年度统计',
            subtext: '纯属虚构',
            x: 'center'
        },
        //color: ['#3398DB'],

        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisTick: {
                alignWithLabel: true
            }
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '发布量',
            itemStyle: {

                normal: {

                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                    color: function(params) {

                        // build a color map as your need.

                        var colorList = [

                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                        ];

                        return colorList[params.dataIndex]

                    },

                    //以下为是否显示，显示位置和显示格式的设置了

                    label: {

                        show: true,

                        position: 'top',

//                             formatter: '{c}'

                        formatter: '{c}\n{b}'

                    }

                }

            },
            type: 'bar',
            barWidth: '60%',
            data: [10, 8, 12, 14, 10, 6, 8, 7, 15, 9, 5, 6]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>